<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容检索 - 向量库操作系统</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <header>
        <h1>向量库操作系统</h1>
        <p>文件管理、向量库和检索系统</p>
    </header>
    
    <nav class="navbar">
        <a href="/">首页</a>
        <a href="/files">文件管理</a>
        <a href="/search" class="active">内容检索</a>
        <a href="/stats">系统统计</a>
        <a href="/docs">API文档</a>
    </nav>
    
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>内容检索</h2>
            </div>
            <form id="search-form">
                <div class="form-group">
                    <label for="search-query">检索内容</label>
                    <input type="text" id="search-query" name="query" placeholder="输入要检索的内容..." required>
                </div>
                <div class="form-group">
                    <label for="top-k">返回结果数</label>
                    <input type="number" id="top-k" name="top_k" min="1" max="100" value="10">
                </div>
                <div id="search-progress" class="hidden">
                    <p>检索中...</p>
                </div>
                <button type="submit" class="btn btn-block">开始检索</button>
            </form>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>检索结果</h2>
            </div>
            <div class="search-results" id="search-results">
                <p>请输入检索内容并点击"开始检索"</p>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>检索历史</h2>
            </div>
            <ul class="search-history" id="search-history-list">
                <!-- 检索历史将在这里显示 -->
                <li>加载中...</li>
            </ul>
        </div>
    </div>
    
    <script src="/static/js/main.js"></script>
    <script>
        // 页面特定的初始化代码
        document.addEventListener('DOMContentLoaded', function() {
            // 这里可以添加检索页面特有的初始化代码
        });
        
        // 重写搜索处理函数以支持top_k参数
        function handleSearch(e) {
            e.preventDefault();
            
            const queryInput = document.getElementById('search-query');
            const topKInput = document.getElementById('top-k');
            const query = queryInput ? queryInput.value.trim() : '';
            const topK = topKInput ? parseInt(topKInput.value) : 10;
            
            if (!query) {
                showMessage('请输入搜索关键词', 'error');
                return;
            }
            
            // 显示搜索进度
            showSearchProgress();
            
            fetch('/api/v1/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    query: query,
                    top_k: topK
                })
            })
            .then(response => response.json())
            .then(data => {
                hideSearchProgress();
                
                if (data.success) {
                    renderSearchResults(data.results);
                    showMessage(`找到 ${data.total_found} 个结果`, 'success');
                    // 重新加载搜索历史
                    loadSearchHistory();
                } else {
                    showMessage('搜索失败: ' + (data.error || '未知错误'), 'error');
                }
            })
            .catch(error => {
                hideSearchProgress();
                showMessage('搜索失败: ' + error.message, 'error');
            });
        }
    </script>
</body>
</html>